<template>
    <div>
        <el-pagination class="pagination" @change="change" @size-change="sizeChange" @current-change="currentChange"
            :current-page="current" :page-sizes="pageSizes" :page-size="size" :layout="layout" v-bind="$attrs">
        </el-pagination>
    </div>
</template>

<script lang='ts' setup>
import { ref, defineOptions, defineProps, defineEmits } from 'vue'
defineOptions({
    name: 'Pagination'
})

const emits = defineEmits(['update:current', 'update:pageSize', 'change'])

defineProps({
    current: {
        type: Number,
        default: 1
    },
    size: {
        type: Number,
        default: 5
    },
    pageSizes: {
        type: Array,
        default: () => [2, 5, 10, 20]
    },
    layout: {
        type: String,
        default: "total, sizes, prev, pager, next, jumper",
    },
})

const currentChange = (current) => {
    emits('update:current', current)
}

const sizeChange = (pageSize) => {
    emits('update:pageSize', pageSize)
}

const change = () => {
    emits('change')
}


</script>

<style scoped></style>
